<template>
    <div>
<h1>添加商品</h1>
<p>商品名字：<input type="text" v-model="name"></p>
<p>商品价格：<input type="text" v-model="price"></p>
<p>商品图片<input type="file" id="img"></p>
<p>商品分类：
<select v-model="cate">
    <option v-for="i in cate_list" :key="i.id" :value="i.id">{{i.name}}</option>
</select>
</p>
<p><button @click="addgoods">添加</button></p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            name:'',
            price:'',
            cate:'2',
            base_url:'http://127.0.0.1:8000/',
            cate_list:[],
        }
    },
    methods: {
        get_cate() {
            axios({
                url:this.base_url+'app01/showcate01/',
            }).then(resp=>{
                console.log(resp.data)
                this.cate_list=resp.data
            }) 
        },
        addgoods() {
            let img = document.getElementById('img').files[0]   
            let fdata=new FormData()
            fdata.append('name',this.name)
            fdata.append('price',this.price)
            fdata.append('cate',this.cate)
            fdata.append('img',img)
            axios({
                url:this.base_url+'app01/addgoods/',
                method:'post',
                data:fdata
            }).then(resp=>{
                console.log(resp.data)
            })
        }
    },
    created() {
        this.get_cate()
    }
}
</script>

<style scoped>

</style>
